<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="../styles/tab.css">
    <link rel="stylesheet" href="../styles/style.css">


</head>
<body>
<img src="../img/eg1.png">
<hr>
<main>
    <h4>
        Js-ES6 面向对象 动态添加标签页
    </h4>
    <div class="tabsbox" id="tab">
        <!-- tab 标签 -->
        <nav class="fisrstnav">
            <ul>
                <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
            </ul>
            <div class="tabadd">
                <span>+</span>
            </div>
        </nav>

        <!-- tab 内容 -->
        <div class="tabscon">
            <section class="conactive">测试1</section>
            <section>测试2</section>
            <section>测试3</section>
        </div>
    </div>
</main>

<script>
    var that;

    class Tab {
        constructor(id) {
            // 获取元素
            that = this;
            this.main = document.getElementById(id)
            this.lis = this.main.querySelectorAll('li')
            this.sections = this.main.querySelectorAll('section')
            this.tabadd = this.main.querySelector('.tabadd')
            // li的父元素
            this.ul = this.main.querySelector('.fisrstnav ul:first-child');
            // section 父元素
            this.section = this.main.querySelector('.tabscon');
            this.init();

        }

        init() {
            that.updateNode()
            // this.remove = this.main.querySelectorAll('.icon-guanbi')
            console.log('init,this.lis.length:', this.lis.length)
            this.tabadd.onclick = this.addTab;


            var myDate = new Date();
            const year = myDate.getFullYear();
            const month = myDate.getMonth() + 1;
            let quarterly = Math.ceil(month / 3);
            const first = year + "Q" + quarterly;
            const second = quarterly + 1 < 5 ? year + "Q" + (quarterly + 1) : (year + 1) + "Q" + (quarterly + 1 - 4);
            const third = quarterly + 2 < 5 ? year + "Q" + (quarterly + 2) : (year + 1) + "Q" + (quarterly + 2 - 4);
            const fourth = quarterly + 3 < 5 ? year + "Q" + (quarterly + 3) : (year + 1) + "Q" + (quarterly + 3 - 4);


            console.log(' first,second,third,fourth:', first, second, third, fourth)
            console.log(' year,month,quarterly:', year, month, quarterly)

            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].index = i;
                this.lis[i].onclick = this.toggleTab;
                this.remove[i].onclick = this.delTab;
                this.spans[i].ondblclick = this.editTab;
                this.sections[i].ondblclick = this.editTab;

            }
        }

        // 1. 切换功能
        toggleTab() {
            // console.log(this.index);
            that.clearClass();
            this.className = 'liactive';
            this.style.setProperty('background', '#35ff3f');
            that.sections[this.index].className = 'conactive';
        }

        // 清除所有li 和section 的类
        clearClass() {

            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].style.setProperty('background', '#fff');
                this.lis[i].className = '';
                this.sections[i].className = '';
                this.sections[i].style.setProperty('background', '#ff4c25');
                this.sections[i].style.setProperty('color', '#effffb');
            }
        }

        addTab() {
            // alert(1)
            that.clearClass();
            var random = Math.random()
            this.style.setProperty('background', '#35ff3f');
            var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
            var section = '<section class="conactive">测试' + random + '</section>';
            that.ul.insertAdjacentHTML('beforeend', li);
            that.section.insertAdjacentHTML('beforeend', section);
            that.init();

            console.log(that.lis.length);
            if (that.lis.length === 10) {
                alert('qty over 10 you must stop')
                that.tabadd.style.setProperty('background', '#ff4c55');
                that.tabadd.style.setProperty('display', 'none');
                return;
            }

        }

        updateNode() {
            that.lis = that.main.querySelectorAll('li')
            that.sections = that.main.querySelectorAll('section')
            that.remove = that.main.querySelectorAll('.icon-guanbi')
            that.spans = that.main.querySelectorAll('.fisrstnav li span:first-child')
        }

        editTab() {
            // 当前this指的span
           var str = this.innerHTML;
            // 双击禁止选定文字
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            // alert(11);
            this.innerHTML = '<input type="text" />';
            // 获取span的第一个元素
            var input = this.children[0];
            input.value = str;
            // 文本框里面的文字处于选定状态
            input.select();
            // 当我们离开文本框就把文本框里面的值给span
            input.onblur = function() {
                this.parentNode.innerHTML = this.value;
            };
            // 按下回车也可以把文本框里面的值给span
            input.onkeyup = function(e) {
                if (e.keyCode === 13) {
                    // 手动调用表单失去焦点事件  不需要鼠标离开操作
                    this.blur();
                }
            }
        }

        delTab(e) {
            e.stopPropagation()
            var index = this.parentNode.index;
            console.log(index);
            that.lis[index].remove()
            that.sections[index].remove()
            that.init();
            // -- 有问题，如果从中间删除怎么办？
            if (document.querySelector('.liactive')) return;
            index--;
            that.lis[index] && that.lis[index].click()
            if (that.lis.length == 9) {
                alert('qty none over 10 you can add')
                that.tabadd.style.setProperty('background', '#ff4c55');
                that.tabadd.style.setProperty('display', 'block');
                return;
            }


        }
    }

    var tab = new Tab('tab');

</script>


</body>
</html>